<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">城市选择</div>
      </div>
    </div>
    <div class="content">
      <mt-index-list>
        <mt-index-section
          :index="item.index"
          v-for="item in cityList"
          :key="item.index"
        >
          <div>
            <mt-cell
              :title="add.name"
              v-for="add in item.addr"
              :key="add.name"
              @click.native="handleClick(add.id, add.name)"
            >
            </mt-cell>
          </div>
        </mt-index-section>
      </mt-index-list>
    </div>
  </div>
</template>
<script>
import { IndexList, IndexSection } from "mint-ui";
import cityData from "../city.json";
export default {
  inject: ["reload"],
  name: "addr",
  components: { IndexList, IndexSection },
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.cityList =  cityData.cityList;//城市json数据
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    const cityList = [];
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
    };
  },
  // methods 编写js函数
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    handleClick(id, name) {
    localStorage.setItem("cityId", id);//选择城市存入
    localStorage.setItem("cityName", name);
    this.back();
    },
  },
};
</script>
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  /* width: 80%; */
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
}
.mint-indexlist-content {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
</style>